import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; //EffectComposer 效果组合器 它是处理 WebGLRenderer 效果的 接收 renderer为参数
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; // RenderPass 处理通道 它是处理 scene 场景和相机 camera 的。 接收 scene camera 为参数
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';//UnrealBloomPass 泛光通道

import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; // 高亮发光描边通道 OutlinePass(画布宽高二维向量，场景scene,相机camera)
// 后期处理，点击模型边框高亮 描边

const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera(
  85,
  window.innerWidth / window.innerHeight,
  1,
  1200
); // 相机

const renderer = new THREE.WebGLRenderer({antialias:true}); //渲染器 antialias扛锯齿 默认为false
const controls = new OrbitControls(camera, renderer.domElement); // 轨道控制器


const axesHelper = new THREE.AxesHelper(5); // 辅助线
scene.add(axesHelper);


const Home = () => {

  const texture = useRef(new THREE.TextureLoader()).current.load(
    "./logo512.png"
  );
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const geometry = new THREE.BoxGeometry(1, 1, 0.2);
  const ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);
  const material = [
    new THREE.MeshLambertMaterial({ color: 4244200, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 3500454, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 3757225, opacity: 1 }),
    new THREE.MeshLambertMaterial({ color: 9145712, opacity: 1 }),
    new THREE.MeshLambertMaterial({
      color: "red",
      opacity: 1,
      transparent: false,
      map: texture,
    }), //transparent 属性为true 的时候，透明的背景就不显示出来了。
    new THREE.MeshLambertMaterial({ color: 3120771, opacity: 1 }),
  ];
  const cube = new THREE.Mesh(geometry, material); // 网格模型，需要几何体和材质
  scene.add(cube);

  const mapSprite = new THREE.TextureLoader().load("./光点.png") // 获取图片
  const spriteMaterial = new THREE.SpriteMaterial({map:mapSprite, color: 0x00ffff}) // 材质
  const sprite = new THREE.Sprite(spriteMaterial)
  sprite.scale.set(0.2,0.2,1)
  sprite.position.set(0,1,0)

  scene.add(sprite)

  camera.position.z = 5;

  // 精灵图闪烁效果
  let s = 0.0;
  let Smax = 0.2;
  const spriteAnimate=()=>{
    s += 0.01;
    if (s < 0.5) {
      sprite.scale.x = Smax * (1 + s);
      sprite.scale.y = Smax * (1 + s);
    } else if (s >= 0.5 && s < 1.0) {
      sprite.scale.x = Smax * (2 - s);
      sprite.scale.y = Smax * (2 - s);
    } else {
      s = 0.0;
    }
  }
 
  function animate() {
  
    requestAnimationFrame(animate);
    spriteAnimate() // 精灵图闪烁方法
    controls.update();
    renderer.render(scene, camera);
  }
  animate();
  return <div></div>;
};

export default Home;
